<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!--        <span>卡片名称</span>-->
      </div>
      <el-form label-position="left" :rules="rules" ref="loginForm" :model="form" label-width="60px">
        <el-form-item label="账号" prop="username">
          <el-input prefix-icon=el-icon-user placeholder="请输入账号" v-model="form.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon=el-icon-lock placeholder="请输入密码" v-model="form.password"  show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox label="记住密码" v-model="form.rem"></el-checkbox>
        </el-form-item>
        <el-form-item style="margin-left: 80px">
          <el-button-group>
            <el-button type="primary" @click="login" :loading="isLoading">登录</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// <!--  封装的第一种使用办法 在http也需要一些修改 -->
// import http from '../plugins/http.js';

import { api_login } from '../api/admin.js';

export default {
  data () {
    return {
      // 控制是否实现加载框，false为不，true为是
      isLoading: false,
      form: {
        username: '',
        password: '',
        rem: false
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 10, message: '账号长度在4到10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 10, message: '账号长度在4到10个字符', trigger: 'blur' }
        ]
      }
    };
  },

  methods: {
    login() {
    // 1.验证表单
    // rules写验证规则
    // this.$refs.
      this.isLoading = true;
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) {
          console.log('验证失败');
          return false;
        }

        // 2.提交表单
        // 第二种方式: 这里的本质也是异步（async 和await 是需要配合使用的）
        // 这里是先等api_await执行完毕，才会执行下一步
        const { data: res } = await api_login(this.form.username, this.form.password);
        console.log(res);
        // 这是一种方式
        // api_login(this.form.username, this.form.password)
        //   .then(({ data }) => {
        // //  result是正确的结果
        // //  正常的数据请求得到响应，账号密码出错，也是在这里处理
        //   console.log(data);
        // }).catch(err => {
        //   // 这里请求出错，比如服务器找不到，或者服务器出现问题
        //   console.log(err);
        // });
        // 3.保存token到sessionStorage（令牌。第二次登录就不用去数据库）
        // 从服务器返回的数据中拿token（令牌）
        this.isLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          // 登录错误，后面的代码就没有必要执行了
          return true;
        }
        const data = res.data;
        // if (!data) return false; // 如果用户名或密码错误，下面的不会执行
        const token = data.tokenHead + data.token;
        window.sessionStorage.setItem('token', token); // 会话（浏览器关闭）结束后，自动消除
        // 4.保存用户信息到vuex中的store
        // 5.记住密码，登录成功将用户密码保存到cookies
        if (this.form.rem) {
          this.$cookies.set('username', this.form.username, '7D'); // 7d是设置cookies的失效时间
          this.$cookies.set('password', this.form.password, '7D');
        } else {
          this.$cookies.remove('username');
          this.$cookies.remove('password');
        }
        // 6.登录页面刷新或重新加载时，从cookies中获取(获取cookies中的值(在created上)，需要用一个新的方法)

        // 7.编程式路由跳转到主页面
        this.$router.replace('/home');
      });
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    }
  },
  created() {
    //  获取cookies中的值，然后将他们填写到表单之中
    this.form.username = this.$cookies.get('username');
    this.form.password = this.$cookies.get('password');
  }
};
</script>

<style scoped>
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .box-card {
    width: 480px;
    margin: auto;
    transform: translateY(50%);
  }
  .el-button-group>.el-button-group {
    width: 50%;
  }
  .el-form-item__content {
    margin-left: 120px;
  }
</style>
